import React from 'react';
import {Marker} from 'react-bmap';
import BMap from 'BMap';
import marker from '../../assets/markers.png'
//这是个箭头函数  ，参数为{position。。。}
const CustomMark = (
    {
        position = {
            lng: 116.402544,
            lat: 39.928216
        },
        title='',
        width = 18,
        height = 18,
        background = `white`,
        textAlign = 'center',
        lineHeight = '1em',
        color = 'white',
        backgroundPositionX='-24px',
        backgroundPositionY='-233px',
        type,
        events = {
            click() {
            }
        },
        ...otherProps
    }
                    ) => {
        if(type){
            backgroundPositionX='-225px';
            backgroundPositionY='-139px';
        }
        const device_name=position.device_name;
        const time=position.time;
        const style = {
            width: width + 'px',
            height: height + 'px',
            borderRadius:'50%',
            border:'4px solid #2f54eb',
            boxShadow:'0 0 3px 1px blue',
            marginTop:'5px',
            cursor:'pointer',
            textAlign,
            color,
            background,
            backgroundSize: 'cover',
            backgroundRepeat: 'no-repeat',
        };
        const myStyle={
            color: 'white',
            fontSize: '12px',
            transform: 'translate(-60px,-75px)',
            width: '150px',
            padding:'15px',
            position: 'absolute',
            border: '1px solid blue',
            listStyle:'none',
            textAlign:'left',
            borderRadius:'5px',
            background: 'rgba(0,0,0,.8)',
        };
        const offset = new BMap.Size(-width / 2, -height);
        return (
            // fragment:没有意义的元素
            <React.Fragment>
                <Marker position={position} offset={offset}  {...otherProps} animation={true} >
                    <div style={style}>
                        <ul style={myStyle}>
                            <li>设备：{device_name}</li>
                            <li>时间：{time}</li>
                        </ul>
                    </div>
                </Marker>
            </React.Fragment>
        )

};

//返回一个函数：参数是标注点的信息
export default CustomMark;
